<template>
<!-- 注册内容 -->
<div class="register">
				<h3>注册新用户
					<span class="go">我有账号，去 <a href="login.html" target="_blank">登陆</a>
					</span>
				</h3>
				<ValidationObserver v-slot="{ handleSubmit }">
				<form @submit.prevent="handleSubmit(submit)">
				<ValidationProvider tag="div" mode="lazy" rules="requiredPhone|phoneres"  class="content" v-slot="{ errors }">
					<label>手机号:</label>
					<input type="text" v-model="user.phone" placeholder="请输入你的手机号">
					<span class="error-msg">{{ errors [0]}}</span>
				</ValidationProvider>
				<ValidationProvider v-slot="{errors}" class="content" rules="requiredcode|coderes" tag="div" mode="lazy">
					<label>验证码:</label>
					<input type="text" v-model="user.code"  placeholder="请输入验证码">
					<input type="button" style="width:90px" value="获取验证码" ref="code" @click="getphone">
					<span class="error-msg">{{ errors [0]}}</span>
				</ValidationProvider>
				<ValidationProvider v-slot="{errors}" class="content" rules="requiredpassword|passwordres" name="passwordnum" tag="div" mode="lazy">
					<label>登录密码:</label>
					<input type="text" v-model="user.password" placeholder="请输入你的登录密码">
					<span class="error-msg">{{ errors[0] }}</span>
				</ValidationProvider>
				<ValidationProvider v-slot="{errors}" class="content" rules="requiredpassword|passwordres|compassword:@passwordnum" tag="div" mode="lazy">
					<label>确认密码:</label>
					<input type="text" v-model="user.rePassword" placeholder="请输入确认密码">
					<span class="error-msg">{{ errors[0] }}</span>
				</ValidationProvider>
				<ValidationProvider v-slot="{errors}" class="controls" rules="requiredagree" tag="div" mode="lazy">
					<input name="m1" type="checkbox" v-model="user.isAgree">
					<span>同意协议并注册《尚品汇用户协议》</span>
					<span class="error-msg">{{ errors[0] }}</span>
				</ValidationProvider>
				<div class="btn">
					<button>完成注册</button>
				</div>
			</form>
		</ValidationObserver>
			</div>
</template>

<script>
import { ValidationObserver, ValidationProvider ,extend} from "vee-validate";
import {required} from 'vee-validate/dist/rules'
import {phoneNumReg,codeNumReg,passwordReg} from '@/utils/reg'
import req from '@/http/reqdata'
import router from '@/router';
let {reqgetphonecode,reqgetregister} = req
extend('requiredPhone', {
  ...required,
  message: '手机号码不能为空'
});

extend('phoneres',{
	validate: value =>{
		return phoneNumReg.test(value)
	},
	message:'手机格式不对'
})

extend('requiredcode', {
  ...required,
  message: '验证码不能为空'
});

extend('coderes',{
	validate: value =>{
		return codeNumReg.test(value)
	},
	message:'验证码不对'
})

extend('requiredpassword', {
  ...required,
  message: '密码不能为空'
});

extend('passwordres',{
	validate: value =>{
		return passwordReg.test(value)
	},
	message:'密码格式不对'
})

extend('compassword',{
	params:['passwordnum'],
	validate: (value,{passwordnum}) =>{
		return value == passwordnum
	},
	message:'确认密码和密码不一样'
})

extend('requiredagree',{
	validate: value =>{
		return value 
	},
	message:'请阅读协议'
})

    export default {
        name:'Enroll',
		data(){
			return {
				user: {
                   phone: "",
                   password: "",
                   rePassword: "",
                   code: "",
                   isAgree: false, // 是否同意用户协议
                 },
				 isgetcode:true
			}
		},
		methods:{
             async getphone(){
				if( !phoneNumReg.test(this.user.phone)) {
					alert('手机格式不对')
					return
				}
               if(!this.isgetcode) return
			   this.isgetcode = false
			   let num = 10
			   let ltem =setInterval(()=>{
                   num--
				   if(num<1){
					console.log(11111);
					this.$refs.code.value = `获取验证码`
					clearInterval(ltem)
					this.isgetcode = true
					return
				   }
				   this.$refs.code.value = `重新发送(${num}s后)`
			   },1000)
               let req = await reqgetphonecode(this.user.phone)
			   console.log(req);
			   if(req.code === 200){
				console.log(req);
				this.user.code = req.data
			   }
			 },

			async submit(){
				let {phone,code,password} = this.user
				console.log(phone,code,password);
               let req = await reqgetregister({phone,code,password})
			   console.log(req);
			   if(req.code === 200){
				console.log(req);
                    this.$router.push('/login')
			   }else{
				alert(req.message)
			   }
			}
		},
		components:{
			ValidationObserver,
			ValidationProvider
		}
    }
</script>

<style lang="less" scoped>
.register {
	width: 1200px;
	height: 445px;
	border: 1px solid rgb(223, 223, 223);
	margin: 0 auto;

	h3 {
		background: #ececec;
		margin: 0;
		padding: 6px 15px;
		color: #333;
		border-bottom: 1px solid #dfdfdf;
		font-size: 20.04px;
		line-height: 30.06px;

		span {
			font-size: 14px;
			float: right;

			a {
				color: #e1251b;
			}
		}
	}

	div:nth-of-type(1) {
		margin-top: 40px;
	}

	.content {
		padding-left: 390px;
		margin-bottom: 18px;
		position: relative;

		label {
			font-size: 14px;
			width: 96px;
			text-align: right;
			display: inline-block;
		}

		input {
			width: 270px;
			height: 38px;
			padding-left: 8px;
			box-sizing: border-box;
			margin-left: 5px;
			outline: none;
			border: 1px solid #999;
		}

		img {
			vertical-align: sub;
		}

		.error-msg {
			position: absolute;
			top: 100%;
			left: 495px;
			color: red;
		}
	}

	.controls {
		text-align: center;
		position: relative;

		input {
			vertical-align: middle;
		}

		.error-msg {
			position: absolute;
			top: 100%;
			left: 495px;
			color: red;
		}
	}

	.btn {
		text-align: center;
		line-height: 36px;
		margin: 17px 0 0 55px;

		button {
			outline: none;
			width: 270px;
			height: 36px;
			background: #e1251b;
			color: #fff !important;
			display: inline-block;
			font-size: 16px;
		}
	}
}


</style>